<template>
  <el-dialog
    title="审核"
    class="task-edit-body"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="true"
    top="20px"
    width="950px"
    :close-on-click-modal="false">
    <div class="task-edit-header">
      <div class="edit-avatar">
        <el-avatar size="medium" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
      </div>
      <div class="nick-name">发布人昵称</div>
      <div class="user-id">用户ID：d2222</div>
    </div>
    <div class="subtitle">基础信息</div>
    <div class="basic-info">
      <div class="normal-explanation">标题：测试标题1</div>
      <div class="normal-explanation">时间：2018-11-11 11：11：11</div>
      <div class="basic-info-table">
        <table border="1">
          <tr>
            <td>分类</td>
            <td>平台名称</td>
            <td>金额</td>
            <td>单价</td>
            <td>手续费</td>
            <td>数量</td>
            <td>设备条件</td>
            <td>限次</td>
            <td>提交时限</td>
            <td>审核时限</td>
            <td>结束时间</td>
          </tr>
          <tr>
            <td>分类1</td>
            <td>抖音</td>
            <td>7</td>
            <td>1</td>
            <td>2</td>
            <td>5</td>
            <td>IOS安卓</td>
            <td>每人一次</td>
            <td>一小时</td>
            <td>三小时</td>
            <td>2019-11-11 11：11：11</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="subtitle">操作步骤</div>
    <div class="task-step">
      <div>
        <div class="subtitle-step" style="width: 45px">
          步骤一
        </div>
      </div>
      <div class="input-content">
        <el-input placeholder="详细的步骤"></el-input>
      </div>
      <div class="input-content">
        <el-input placeholder="可一键复制的内容（如：邀请码 、口令、 链接）"></el-input>
      </div>
      <div class="input-image">
        <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>
      </div>
    </div>
    <div class="subtitle">收集截图</div>
    <div class="task-step">
      <div>
        <div class="subtitle-step" style="width: 45px">
          步骤一
        </div>
      </div>
      <div class="input-content">
        <el-input placeholder="详细的步骤"></el-input>
      </div>
      <div class="input-image">
        <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>
      </div>
    </div>
    <div class="subtitle">收集信息</div>
    <div class="task-step">
      <div>
        <div class="subtitle-step" style="width: 45px">
          字段一
        </div>
      </div>
      <div class="input-content">
        <el-input placeholder="编辑的内容"></el-input>
      </div>
    </div>
    <div class="subtitle">举报理由</div>
    <div class="task-step">
      <div>
        类型：其他
      </div>
      <div class="input-content">
        <div class="report-content">
          这就是举报内容
        </div>
      </div>
    </div>
    <div class="verify-body">
      <div class="verify-time">审核时间：2020-11-11  11：11：11</div>
      <div class="verify-reason">拒绝理由：
        <div class="reason-content">
          这就是拒绝理由
        </div>
      </div>
    </div>
    <div slot="footer" style="display: flex;justify-content: center;">
      <el-button type="primary"
                 @click="refuse"
                 native-type="submit">拒绝
      </el-button>
      <el-button type="primary"
                 @click="pass"
                 native-type="submit">通过
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'verify-dialog',
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    open () {
      this.dialogVisible = true
    },
    refuse () {

    },
    pass () {

    }
  }
}
</script>

<style scoped lang="scss">
  .task-edit-body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    .task-edit-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: -20px;
      .nick-name,.user-id {
        margin-left: 20px;
      }
    }
    .subtitle {
      border-left: 3px solid red;
      margin: 10px 0;
      padding-left: 8px;
      border-radius: 1px;
    }
    .basic-info {
      display: flex;
      flex-direction: column;
      .normal-explanation {
        margin: 5px 0;
      }
      .basic-info-table {
        margin: 20px 0;
        table {
          border-collapse : collapse;
          width: 100%;
          text-align: center;
          tr {
            td {
              height: 35px;
            }
          }
        }
      }
    }
    .task-step {
      display: flex;
      flex-direction: column;
      .subtitle-step {
        border-bottom: 4px solid blue;
        margin-bottom: 5px;
      }
      .input-content {
        margin: 10px 0;
        width: 600px;
        .report-content {
          height: 150px;
          border: 1px solid #adadad;
          padding: 15px 10px;
        }
      }
      .input-image {
        width: 240px;
      }
    }
    .verify-body {
      display: flex;
      flex-direction: column;
      .verify-time {
        color: red;
      }
      .verify-reason{
        margin: 5px 0;
        display: flex;
        flex-direction: row;
        .reason-content {
          padding: 15px 10px;
          width: 350px;
          height: 120px;
          border: 1px solid #adadad;
        }
      }
    }
  }
</style>
